<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: 梁清福
 * @LastEditTime: 2022-01-10 20:58:14
-->
<template>
    <!--1. 容器 -->
    <div ref="right1_container" id="container" style="height: 95%"></div>
</template>

<script>
// 2.引入折线图构造函数
import { Line } from '@antv/g2plot'
import { get } from '../../../utils/request'
import moment from 'moment'

export default {
    data() {
        return {
            dataArr: []
        }
    },
    created() {

    },
    mounted() {
        this.initData()
    },
    methods: {
        initData() {
            get('/dashboard/pageQueryTodayData', {
                page: 1,
                pageSize: 20,
                device_id: 1
            }).then(res => {
                res.data.list.forEach(item => {
                    
                });
                  let data = res.data.list.map(item => {
                  return {
                    time:moment(item.insert_time).format('hh:mm'),
                    value:+item.humidity
                  }
                })
               this.dataArr = data;
              
                this.initChart()
            })

        },

        initChart() {
            // 3.创建一个折线图实例对象
            // id=’’container‘‘
            // const line = new Line(’container‘, {
            // ref= 'left1_container'
            const line = new Line(this.$refs.right1_container, {
                data: this.dataArr,
                xField: 'time',
                yField: 'value'
            });

            // 4.渲染图像
            line.render();


        }


    }


}
</script>

<style scoped>

</style> 